<template>
  <view class="userItem">
    <view class="userImg">
      <image :src="item.followedUserProfileUrl" mode="scaleToFill"/>
    </view>
    <view class="userContent">
      <view class="baseData">
        <view class="userName">{{ item.followingUserName }}</view>
<!--        <view class="updateTime">1周内更新</view>-->
      </view>
      <view class="otherData">
        <view class="fansNumber">粉丝数{{ userInfo.fansNumber }} | 帖子{{ userInfo.articleNumber }}</view>
<!--        <FollowStyle :isFollow="true" followText="你的关注"/>-->
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import FollowStyle from "@/components/FollowStyle";
import userManagement from "@/api/user";
import followManagement from '@/api/followManagement'
import collectionManagement from '@/api/collectionManagement'
import articleManagement from '@/api/articleManagement'
const src = ref(
  "https://ts1.cn.mm.bing.net/th/id/R-C.526534e86fbf5b0393c3786476354596?rik=4c%2f6H8efTGfetQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190403%2f21%2f1554298696-ctPdXnbaVY.jpg&ehk=HWIBm7fjChTkc8AQW2zPCN5yhY5zWv6tHy2gfK7wZ2A%3d&risl=&pid=ImgRaw&r=0"
);

const notView = ref(true);
const props = defineProps({
  item:{
    type: Object,
    default: () => {}
  }
})
const userInfo=ref({
  fansNumber:0,
  articleNumber:0
})
const followingUserId = props.item.followingUserId
if (followingUserId) {
  followManagement.getFollowedUserNum(followingUserId)
    .then(res => {
      if (res.data) {
        userInfo.value.fansNumber = res.data
      }
    })
    .catch(err => {
      console.log(err)
    })
  articleManagement.getNumOfArticlesByUserId(followingUserId)
    .then(res => {
      if (res.data) {
        userInfo.value.articleNumber = res.data
      }
    })
    .catch(err => {
      console.log(err)
    })
}else {
  console.log("followingUserId不存在")
}
</script>

<style lang="scss">
.userItem {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin: 20rpx 0;
}

.userImg {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
}

.userContent {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #dcdcdc;
}

.baseData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  .userName {
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
  }

  .updateTime {
    color: rgba(153, 153, 153, 1);
    font-size: 18rpx;
  }
}

.otherData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;

  .fansNumber {
    color: rgba(153, 153, 153, 1);
    font-size: 22rpx;
  }

  .isYpurFollow {
    color: rgba(153, 153, 153, 1);
    font-size: 22rpx;
  }
}
</style>
